<template>
  <div
    class="g_warp g_margin_auto g_pointer breadcrumbs"
    v-show="$route.path !== '/home'"
  >
    <!-- <slot>首页</slot> / <span>{{ breadcrumbsTitle }}</span> -->
    <!-- <slot class="redcolor" name="left" :title="obj.title"></slot> -->
    <!-- 首页或者全部商品 -->
    <span class="primary" @click="handleClick">{{ primaryTitle }}</span>
    <span class="second"> / {{ secondTitle }}</span>
  </div>
</template>

<script>
export default {
  props: ["breadcrumbsTitle", "obj"],
  computed: {
    primaryTitle() {
      if (this.$route.path === "/productDetail") {
        return "全部商品";
      } else {
        return "首页";
      }
    },
    secondTitle() {
      console.log("@this.$route", this.$route);
      if (this.$route.path === "/productDetail") {
        return "商品详情";
      } else {
        return this.$route.meta.title;
      }
    },
  },
  methods: {
    handleClick() {
      if (this.$route.path === "/productDetail") {
        this.$router.push("/allProducts?comeType=all");
      } else {
        this.$router.push("/home");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.breadcrumbs {
  height: 17px;
  font-weight: 400;
  text-align: left;
}
.second {
  color: #999;
}
// 插槽测试
.redcolor {
  color: #000;
  background: red;
}
</style>